<template>
    <Tabs value="name1">
        <TabPane label="GPS监控" name="name1">
            <Table stripe :columns="columns1" :data="data1" :height="tableHeight">
                <template slot="action2" slot-scope="{row}">
                    <span :class="{addColor:row.plate_color==='2'}">{{row.vehicle_no}}</span>
                </template>
                <template slot="action" slot-scope="{row}">
                    <Button type="warning" size="small" v-if="row.position ===''" @click="showPosition(row)">显示位置</Button>
                    <span v-if="row.position !==''">{{row.position}}</span>
                </template>
            </Table>
        </TabPane>
        <TabPane label="报警信息" name="name2">
            <Table stripe :columns="columns2" :data="data2" :height="tableHeight">
                <template slot="action1" slot-scope="{row}">
                    <span class="addColor">{{row.vehicle_no}}</span>
                </template>
            <template slot="action" slot-scope="{row}">
                <Button type="warning" size="small" v-if="row.position ===''" @click="showPosition(row)">显示位置</Button>
                <span v-if="row.position !==''">{{row.position}}</span>
            </template>
            </Table>
        </TabPane>
        <TabPane label="指令状态" name="name3">
            <Table stripe :columns="columns3" :data="data3" :height="tableHeight"></Table>
        </TabPane>
    </Tabs>
</template>

<script>
import tableClumns from './data/table-columns'
import tableData from './data/table-data'
import { restPosGeo } from '@/api/map'
export default {
  name: 'mapTable',
  props: {
    tableHeight: {
      type: Number,
      default: () => {
        return 100
      }
    },
    data1: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    data2 () {
      let data = []
      this.data1.forEach((item, index) => {
        if (item.plate_color === '2') {
          data.push(item)
        }
      })
      return data
    }
  },
  data () {
    return {
      columns1: tableClumns.columns1,
      columns2: tableClumns.columns2,
      columns3: tableClumns.columns3,
      // data1: tableData.data1,
      // data2: tableData.data2,
      data3: tableData.data3,
      plate_color: true
    }
  },
  methods: {
    showPosition (row) {
      if (row.lat && row.lng) {
        restPosGeo({ lng: row.lng, lat: row.lat }).then(ret => {
          if (ret.data.status === 200) {
            row.position = ret.data.result
          }
        })
      } else {
        this.$Message.warning('没有经纬度信息！')
      }
    }
  }
}
</script>

<style scoped>
    .table {
        height: 100%;
    }
    .vehicle{
        color: red;
    }
</style>
